<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link href="css/swiper-5.4.5/swiper.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <style>
        .nx-nav-container ul{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .nx-nav-container ul li{
            display: inline-block;
            width: 120px;
            text-align: center;
            line-height: 45px;
        }
        .nx-nav-container a{
            color: #FFFFFF;
        }
        .nx-nav-container a:hover {
            color: aquamarine;
            text-decoration: none;
        }
        .left-box{
            width: 100%;
            height: 400px;
            background-color: #FFFFFF;
        }
        .img-item-box{
            width: 100%;
            height: 90px;
            margin-top: 10px;
        }
        .right-box{
            width: 100%;
            height: 400px;
            background-color: #FFFFFF;
        }

        .right-title{
            font-size: 20px;
            font-weight: bold;
        }
        .right-box li{
            padding: 10px 40px;
        }
        .praise{
            cursor: pointer;
            font-size: 20px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div class="nx-header">
        <div style="display: flex;width: 100%;height: 30px;line-height: 30px;background-color: #eee;">
            <div style="flex: 5;padding: 0 10px; color: orangered;">
                欢迎访问 电影订票购票系统
            </div>
            <div v-if="user.name" style="flex: 1">
                欢迎您： {{user.name}}
                <a style="margin-left: 30px;color: blue;" href="javascript:void(0);" @click="logout">退出</a>
            </div>
        </div>
    </div>

    <div class="nx-nav-container" style="height: 45px;background-color: black;">
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="advertiserInfo.html">公告信息</a></li>
            <li><a href="messageInfo.html">在线交流信息</a></li>
            <li><a href="linkInfo.html">友情链接</a></li>
            <li><a href="cartInfo.html">收藏栏信息</a></li>
            <li><a href="orderInfo.html">订单信息</a></li>
            <li><a href="commonInfo.html">评价信息</a></li>
            <li><a href="javascript:void(0)" @click="personalPage">个人信息</a></li>
            <li v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a></li>
            <li v-if="!isLogin"><a href="/end/page/login.html" target="_blank">登录</a></li>
            <li v-if="!isLogin"><a href="/end/page/register.html" target="_blank">注册</a></li>
        </ul>
    </div>

    <div class="container" style="margin-top: 20px;">
        <div class="row">
            <div class="col-md-3">
                <div class="left-box">
                    <div style="width: 100%;height:300px">
                        <img id="main-img-id" style="height: 100%;width: 100%;" src="mainSrc">
                    </div>
                    <ul class="img-item-box">
                        <li v-for="id in fields" class="col-md-3">
                            <img :src="'/files/download/' + id" style="width: 100%;height: 100%;"@mouseover="mouseover(id)">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-7">
                <div class="right-box">
                    <ul>
                        <li>
                            <span class="right-title">{{goodsInfo.name}}</span>
                            <i class="fa fa-thumbs-o-up praise" @click="hotClick()">
                                <span style="margin-left: 3px;font-size: 12px;">{{goodsInfo.hot}}</span>
                            </i>
                        </li>
                        <li>
                            描述：<span style="margin-left: 20px;color: red;">{{goodsInfo.description}}</span>
                        </li>
                        <li>
                            主演：<span style="margin-left: 20px;color: red;">{{goodsInfo.actor}}</span>
                        </li>
                        <li>
                            价格：<span style="margin-left: 20px;color: red;">￥{{goodsInfo.price}}</span>
                        </li>
                        <li>
                            促销：<span style="margin-left: 20px;color: red;">{{goodsInfo.discount}}</span>
                        </li>
                        <li>
                            上映时间：<span style="margin-left: 20px;color: red;">{{goodsInfo.beginTime}}</span>
                        </li>
                        <li>
                            放映时长：<span style="margin-left: 20px;color: red;">{{goodsInfo.time}}分钟</span>
                        </li>
                        <li>
                            <button class="btn btn-info" @click="buySeat()">在线选座</button>
                            <button class="btn btn-info" @click="addCart()">收藏</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <div style="background-color: white;min-height: 300px">
                <div style="width: 100%;height: 50px;background-color: #ddd;line-height: 50px;margin: 30px 0">
                    <span style="font-weight: bold;margin-left: 20px;font-size: 16px;">电影评价（{{totalCommment}}）</span>
                </div>
                <div v-for="item in comments" class="row">
                    <div class="col-md-1" style="text-align: right">{{item.userName}}</div>
                    <div class="col-md-10">
                        <div class="row" style="padding: 0 40px">
                            <div class="col-md-12" style="text-align: justify;">{{item.content}}</div>
                            <div class="col-md-12" style="text-align: right; margin-top: 10px">
                                <span style="color: #888888">{{item.createTime}}</span>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 在线选座弹窗 -->
    <div class="modal fade" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 800px;">
                <div class="modal-header">
                    <span class="modal-title">在线选座</span>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <!-- 这里可添加具体选座相关内容，如座位展示、操作按钮等 -->
                    <div style="display: flex">
                        <div style="width: 60%;padding: 10px;">
                            <div style="width: 340px;height: 10px;background-color: black;margin-left: 60px;"></div>
                            <div style="text-align: center;margin-bottom: 20px;font-size: 12px;color: #888;margin-left:20px;">屏幕</div>
                            <div style="width: 390px;margin: 0 auto" id="seat-area"></div>
                            <div style="text-align: right;width:370px;margin: 10px auto">
                                <div style="display: inline-block;width: 30px;height:10px;background: brown;"></div>已售
                                <div style="display: inline-block;width: 30px;height:10px;background: #1E9FFF;"></div>空闲
                            </div>
                        </div>
                        <div style="width: 40%;padding-top: 30px;border-left: 1px solid #ccc">
                            <div style="width: 85%;margin:0 auto;color: #666666">
                                <div class="row">
                                    <div class="col-md-3">影片:</div>
                                    <div class="col-md-9"id="movie"></div>
                                </div>
                                <div class="row" style="margin-top:10px">
                                    <div class="col-md-3">座位:</div>
                                    <div class="col-md-9"id="seat-view"></div>
                                </div>
                                <div class="row" style="margin-top:10px">
                                    <div class="col-md-3">票数:</div>
                                    <div class="col-md-9"id="tickets"></div>
                                </div>
                                <div class="row" style="margin-top:10px">
                                    <div class="col-md-3">总计:</div>
                                    <div class="col-md-9"id="total"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-default"data-dismiss="modal">关闭</button>
                    <button type="button" class="btn-default"@click="postSeat()">下单</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper-5.4.5/swiper.min.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/my.js"></script>
<script>
    let seatArr = [];           //在这之前已经选择的座位
    let seatId;              //当前电影场次对应的座位信息对应的主键
    let goodsId =0;             //当前电影的主键id
    let tempArr = [];           //当前正在选择的座位
    new Vue({
        el: "#wrapper",
        data: {
            user: {}, // 当前登录用户
            isShow: false, // 是否显示进入后台
            isLogin: false, // 是否登录
            mainSrc:'',      //商品第一个图
            goodsId:'',      //当前电影的主键id
            goodsInfo: {},    //当前商品详情
            fields: [],       //当前商品的所有图片的列表
            comments: [],   //当前电影的所有评价
            totalComment: 0,  //评价总数
        },
        created: function () {
            // 查询权限
            axios.get('/auth').then(res => {
                if (res.data.code == '0') {
                    this.user = res.data.data;
                    // 若是管理员
                    if (this.user.level === 1) {
                        // 显示可以进入后台
                        this.isShow = true;
                    }
                    this.isLogin = true;
                }
            });
            this.goodsId = this.getQueryVariable('goodsId');
            goodsId = this.goodsId;
            this.loadGoodsInfo();
            this.loadComments();
        },
        methods: {
            logout(){
                axios.get('/logout').then(res =>{
                    if(res.data.code === '0'){
                        location.href = '/front/index.html';
                    }else{
                        alert(res.data.msg);
                    }
                });
            },
            //获取前一页传来的参数
            getQueryVariable(variable){
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                for(let i=0;i<vars.length;i++){
                    let pair = vars[i].split("=");
                    if(pair[0] === variable){
                        return pair[1];
                    }
                }
                return '';
            },
            //加载商品详情
            loadGoodsInfo(){
                axios.get("/goodsInfo/"+this.goodsId).then(res =>{
                   this.goodsInfo = res.data.data;
                   this.mainSrc = '/front/img/goods/default.png';
                   if(this.goodsInfo.fields){
                       let fields = JSON.parse(this.goodsInfo.fields);
                       //截取前4个展示
                       if(fields.length > 4){
                           fields = fields.splice(0,4);
                       }
                       this.fields = fields;
                       if(fields.length){
                           this.mainSrc = '/files/download/'+fields[0];
                       }
                   }
                   let discount = this.goodsInfo.discount;
                   this.goodsInfo.discount = discount<1?discount*10+"折":'-';
                   let name = this.goodsInfo.name;      //商品名称
                   let price = this.goodsInfo.price;    //商品单价

                   //根据电影id查询已售座位
                    $.get("/seatInfo/datail",{goodsId: goodsId},function (res){
                        if(res.code === '0'){
                            if(res.data){
                                let position =res.data.position;
                                if(position){
                                    seatArr = JSON.parse(position);
                                }
                                seatId =res.data.id;
                            }

                            //初始化选座区域
                            let $statArea=$('#seat-area') ;
                            $seatArea.empty();
                            $('#movie').text(name);
                            $('#seat-view').text(tempArr.join(","));
                            $('#tickets').text(tempArr.length);
                            $('#total').text("￥ "+(tempArr.length * price *discount).toFixed(2));
                            for(let i =1;i<=10;i++){
                                $seatArea.append("<div style='width:30px;height:30px;margin-bottom:5px;margin-right:5px;text-align:center;"+
                                    "vergtical-align:middle;line-height:30px;display:inline-block'>"+i+"</div>");
                                for(let j=1;j<=10;j++){
                                    $seatArea.append("div style='width:30px;height:30px;cursor:pointer;text-align:center;"+
                                        "vergtical-align:middle;line-height:30px;display:inline-block;color:white;border-radius:5px;"+
                                        "margin-bottom:5px;margin-right:5px;background-color:#1E9FFF;' class='seat-block' data-id="+i+"排"+"j"+"座">+j+"</div>");
                                }
                            }
                            //给已选的加背景
                            for(const s of seatArr){
                                $('.seat-block').each(function (){
                                    if($(this).attr('data-id') === s){
                                        $(this).css('background','brown');
                                    }
                                });
                            }
                            //选座位
                            $('.seat-block').click(function(){
                                $(this).css('background','brown');
                                const dataId = $(this).attr('data-id');
                                if(seatArr.includes(dataId)){
                                    return;
                                }
                                if(tempArr.includes(dataId)){
                                    tempArr.splice(tempArr.indexOf(dataId),1)
                                    $(this).css('background','#1E9FFF');
                                }else{
                                    tempArr.push(dataId);
                                }
                                $('#seat-view').text(tempArr.join(","));
                                $('#tickets').text(tempArr.length);
                                $('#total').text("￥ "+(tempArr.length * price *discount).toFixed(2));
                            });
                        }else{
                            alert(res.data.msg);
                        }


                    });

                });
            },
            //鼠标移过来显示大图
            mouseover(id){
                $('#main-img-id').attr('src','/files/download/'+id);
            },
            //点赞
            hotClick(){
                axios.put("/goodsInfo", {id: this.goodsId, hot: 1}).then(res => {
                    if (res.data.code === '0') {
                        alert("点赞+1");
                        this.loadGoodsInfo();
                    } else {
                        alert(res.data.msg);
                    }
                });

            },
            //在线选座
            buySeat(){
                if(!this.user.name){
                    alert("请先登录");
                    location.href = '/end/page/login.html';
                    return;
                }
                $('#myModal').modal('show');
            },
            //下单
            postSeat(){
                if(!tempArr.length){
                    alert("请先选座！");
                    return;
                }
                let data = {id: seatId,goodsId:goodsId,position: JSON.stringify(tempArr.concat(seatArr))};
                let _this = this;
                $.ajax({
                    url: '/seatInfo',
                    type:'post',
                    contentType: 'application/json',
                    data:JSON.stringify(data),
                    success: function(res){
                        if(res.code === '0'){
                            let datal = {total:tempArr.length,goodsId:goodsId,userId:_this.user.id,level:_this.user.level};
                            $.ajax({
                                url:'/orderInfo',
                                type:'post',
                                contentType: 'application/json',
                                data:JSON.stringify(data1),
                                success: function(res){
                                    if(res.code === '0'){
                                        alert('购票成功');
                                        setTimeout(function(){
                                            location = '/front/orderInfo.html';
                                        },1000);
                                    }
                                }
                            });
                        }
                    }
                });
            },
            //收藏
            addCart(){
                if(!this.user.name){
                    alert("请先登录");
                    location.href = '/end/page/login.html';
                    return;
                }
                let data = {userId:this.user.id,level:this.user.level,goodsId:goodsId};
                $.ajax({
                    url:'/cartInfo',
                    type:'post',
                    contentType: 'application/json',
                    data:JSON.stringify(data),
                    success: function(res){
                        if(res.code === '0'){
                            alert('收藏成功');
                        }
                    }
                });
            },
            //查询评价列表
            loadComments(){
                axios.get('/commentInfo/all/'+this.goodsId).then(res=>{
                    if(res.code === '0'){
                        this.comments = res.data.data;
                        this.totalComment =this.comments.length;
                    }else{
                        alert(res.data.msg);
                    }
                });
            },
        }
    });
</script>
</body>
</html>